<template>
  <div class="list-container">
    <!-- 发放详情 -->
    <div class="steps">
      <el-steps :active="active">
        <el-step class="length-title">
          <template slot="title">
            <div class="steps-title">工资表单已提交</div>
          </template>
          <template slot="description">
            <div>银行待发</div>
          </template>
        </el-step>
        <el-step>
          <template slot="title">
            <div class="steps-title">待进行</div>
          </template>
          <template slot="description">
            <div>银行代发</div>
          </template>
        </el-step>
        <el-step>
          <template slot="title">
            <div class="steps-title">银行已发</div>
          </template>
          <template slot="description">
            <div>银行已发工资</div>
          </template>
        </el-step>
      </el-steps>
    </div>
    <div class="table-panel">
        <el-form v-model="searchForm" :inline="true">
          <el-form-item label="出勤时间：">
            <el-date-picker
              @change="changeMonth"
              v-model="searchForm.date"
              type="month"
              placeholder="选择月份"
              value-format="yyyy-MM"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      <el-row>
        <el-col :span="5" style="border-right:1px solid #e8e8e8">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </el-col>
        <el-col :span="19">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              prop="id"
              type="index"
              label="序号"
              width="60"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="personName" label="人员姓名" align="center">
            </el-table-column>
            <el-table-column prop="attendanceDays" label="总出勤" align="center">
              <template slot-scope="scope">
                <div>{{ scope.row.attendanceDays }}天</div>
              </template>
            </el-table-column>
            <el-table-column prop="actualMonthlyWage" label="实际工资" align="center">
              <template slot-scope="scope">
                <div>¥{{ scope.row.actualMonthlyWage }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="shouldIssuedMonthlyWage"
              label="发放工资"
              align="center"
            >
              <template slot-scope="scope">
                <div>¥{{ scope.row.shouldIssuedMonthlyWage }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="unissuedMonthlyWage"
              label="未发工资"
              align="center"
            >
              <template slot-scope="scope">
                <div>¥{{ scope.row.unissuedMonthlyWage }}</div>
              </template>
            </el-table-column>
            <el-table-column label="发放状态" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.status == 0">已到账</div>
                <div v-else>未到账</div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(totalData / searchForm.pageSize) }}页/{{
            totalData
          }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="searchForm.currentPage"
          :page-size="searchForm.pageSize"
          layout="sizes,prev, pager, next, jumper"
          :total="totalData"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getTree } from "@/api/worker";
import {laborDistList} from '@/api/wage';
export default {
  data() {
    return {
      active: 1,
      totalData: 0,
      searchForm: {
        currentPage: 1,
        date:this.$route.query.date,
        pageSize: 10,
        date: null,
        teamId: null,
        serviceCorporationId: null,
      },
      flag: 1, //1--一级劳务公司，0--二级班组
      treeData: [
        {
          label: "劳务公司 1",
          children: [
            {
              label: "班组 1-1",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
      tableData: [
        // { name: "赵柳" }
      ],
      companyId:localStorage.getItem("companyId"),

    };
  },
  created() {
    console.log(this.$route.query.date)
    this.searchForm.date = this.$route.query.date;
    this.getTreeData();
    this.getTableData();
  },
  methods: {
    // 获取劳务公司、班组树形数据
    getTreeData() {
      var id = this.companyId
      if(this.companyId==0)  id = null
      getTree(id).then((res) => {
        console.log(res)
        this.treeData = res.data.data;
      });
    },
    getTableData(){
      // 根据班组id查询班组人员————选择班组
        laborDistList(this.searchForm).then((res) => {
          console.log('searchForm',this.searchForm);
          console.log(222,res);
          this.tableData = res.data.data.records;
          this.totalData = res.data.data.total;
          // this.processTableData();
        });
    },
    // 导出
    exportItems() {},
    // 树状图
    handleNodeClick(res) {
      // console.log(res)
      if (res.children == null) {
        // console.log("班组")
        this.flag = 0;
        this.searchForm.teamId = res.id;
        this.searchForm.serviceCorporationId = null;
        this.getTableData();
      } else {
        // console.log("劳务公司")
        this.flag = 1;
        this.searchForm.serviceCorporationId = res.id;
        this.searchForm.teamId = null;
        this.getTableData();
      }
    },
    changeMonth(row){
      this.searchForm.date = row
      this.getTableData();
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
    },
    handleCurrentChange(val) {
      this.searchForm.currentPage = val;
    },
  },
};
</script>

<style lang="scss" >
.steps {
  min-height: 100px;
  background-color: #ffffff;
  padding: 50px 0;
  border-bottom: solid 1px #e4e4e4;
  .el-steps {
    width: 80%;
    margin: 0 auto;
  }
  .el-step__line {
    margin-left: 100px;
  }
  .length-title {
    .el-step__line {
      margin-left: 150px;
    }
  }
  .is-success {
    border-color: #1abc9c;
    color: #1abc9c;
  }
  .el-step__main {
    margin-left: 30px;
    margin-top: -30px;
    .el-step__title {
      font-weight: bold;
    }
  }
}
</style>